<template>
    <div class="username">
        <div class="tips">请输入新的用户名*</div>
        <el-input v-model="newUserName" placeholder="请输入新的用户名"></el-input>
        <div class="btn">确认</div>
    </div>
</template>

<script>
import { ref } from '@vue/composition-api'
export default {
    setup (props, context) {

        const newUserName = ref('');

        const methods = {  }
        return {
            ...methods,
            newUserName
        }
    }
}
</script>

<style lang="less" scoped>
.username {
    padding: 0 .533333rem;
}

.tips {
    color: #4b4b4b;
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: .533333rem;
    margin-top: .533333rem;
}

.btn {
    width: 100%;
    background-color: #1a8eed;
    height: 2.133333rem;
    color: #fff;
    font-size: .8rem;
    text-align: center;
    line-height: 2.133333rem;
    border-radius: .266667rem;
    margin-top: .8rem;
}
</style>